<template>
  <div class="container">
    <el-scrollbar style="height:100%" class="scrollbar-x">
      <el-page-header class="header" @back="goBack" content="门禁设备详情（1号门禁）"></el-page-header>
      <el-tabs type="card" class="f-flex1 tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <basics></basics>
        </el-tab-pane>
        <el-tab-pane label="权限管理" name="fourth">
          <role></role>
        </el-tab-pane>
      </el-tabs>
    </el-scrollbar>
  </div>
</template>

<script>
import Basics from './Basics'
import Role from './Role'
export default {
  components: {
    Basics,
    Role
  },
  data() {
    return {
       activeName: 'first'
    }
  },
  mounted() {
    console.log(this.$route.params.id)
  },
  methods: {
    goBack() {
      console.log(this.$route, this.$router.go(-1))
      console.log('go back');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    overflow: hidden;
    height: 100%;
    .header {
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ebeef5;
    }
    .tabs {
      padding: 20px 30px;
    }
  }
</style>